import React, { useCallback, useMemo } from "react";
import { useProducts } from "@/business.InterfaceLayer/hooks/store/useQueryStore/useQueryStore";
import { Product } from "@/business.InterfaceLayer/type";
import { globalContainer } from "@/user.InterfaceLayer/constants/styles/CommonStyles";
import { useRouter } from "next/router";
import dynamic from "next/dynamic";
import BreadcrumbsAtom from "@/user.InterfaceLayer/Libraries/UI_KIT/Atoms/Breadcrumbs.Atom";

const ProductCard = dynamic(
  () => import("@/user.InterfaceLayer/Libraries/UI_KIT/Cells/ProductCard")
);

const DescriptionProduct = dynamic(
  () =>
    import(
      "@/user.InterfaceLayer/Libraries/UI_KIT/Molecules/DescriptionProduct.molecule"
    )
);

const HitsBlockWidget = dynamic(
  () => import("@/user.InterfaceLayer/Libraries/Widgets/HitsBlock.widget")
);

const ImageProductSlider = dynamic(
  () =>
    import(
      "@/user.InterfaceLayer/Libraries/UI_KIT/Molecules/ImageProductSlider"
    )
);

const ProductPage: React.FC = () => {
  const router = useRouter();
  const { id } = router.query;

  const { products, isLoading } = useProducts();

  const product: Product | undefined = useMemo(() => {
    if (!id || isLoading || !products) return undefined;
    return products.find(
      (product: Product) => product.product_id === parseInt(id as string)
    );
  }, [id, isLoading, products]);

  const renderProduct = useCallback(() => {
    if (!product) return <>Loading....</>;

    return (
      <div className={`${globalContainer}`}>
        <BreadcrumbsAtom />
        <div className="flex justify-between gap-x-4 ">
          <div className="max-w-xl">
            <ImageProductSlider product={product} />
          </div>
          <div className="flex flex-col w-full max-w-96 gap-y-6">
            <ProductCard product={product} />
          </div>
        </div>
        <div className="flex b-t-2  gap-x-6 mt-14 border-green-500 ">
          <DescriptionProduct title="описание" description={product.des} />
          <DescriptionProduct
            title="доставка"
            description={`Бесплатная доставка по\u00A0России при покупке от\u00A020\u00A0000\u00A0₽`}
            link="Условия доставки"
          />
          <DescriptionProduct
            title="возврат"
            description={`Вы\u00A0можете вернуть неподошедший товар в\u00A0течение 14\u00A0дней с\u00A0даты получения. Действует ограничение на\u00A0возврат средств личной гигиены, нижнего белья, чулок, носков, парфюмерии, косметики, а\u00A0также ювелирных и\u00A0технически сложных изделий.`}
          />
        </div>
        <div className="mb-16">
          <h3 className="text-h3 font-bold text-black mb-7 mt-12">
            Похожие товары
          </h3>
          <HitsBlockWidget />
        </div>
      </div>
    );
  }, [product]);

  return renderProduct();
};

export default ProductPage;
